<template>
  <view :class="s.index">
    <view>
      <AtInput
        clear
        required
        v-model="userName"
        :border="false"
        title="清除按钮"
        placeholder="点击清除按钮清空内容"
        type="text"
        :value="value4"
        @change="handleChange"
      />
      <AtInput
        clear
        required
        v-model="password"
        name="value3"
        title="密码"
        type="password"
        placeholder="请输入密码"
        :value="value3"
        @change="handleChange"
      />
      <AtInput
      v-if="isRegister"
        clear
        required
        v-model="nextPassword"
        :error="ifSamePassword"
        name="value3"
        title="密码"
        type="password"
        placeholder="再次输入密码"
        :value="value3"
        @change="handleChange"
      />
    </view>
    <at-button :loading="loading">{{isRegister?"注册":"登陆"}}</at-button>
    <view>
        <view>{{isRegister?"没有账号？去注册一个吧":"已经有账号了，去登陆吧"}}</view>
    </view>
  </view>
</template>

<script lang="ts">
import { defineComponent, reactive, ref, toRefs } from "vue";
import { AtInput } from "taro-ui-vue3";
import { AtButton } from 'taro-ui-vue3'
interface login{
    userName:string,
    password:string,
    nextPassword:string
}

export default defineComponent({
  components: {
    AtInput,
    AtButton
  },
  props:{
    isRegister:{
        type:Boolean,
        default:false
    }
},
  setup(){
      let isRegister = ref<boolean>(false)
      let login = reactive<login>({
          userName:"",
          password:"",
          nextPassword:""
      })
      return {
          ...toRefs(login),
          isRegister
      }
  }
});
</script>

<style lang="scss" module="s">
.index {
  width: 750rpx;
  height: 100vh;
}
</style>